<template>
	<view class="joker-my-new">
		<view class="my-box1">
			<!-- #ifdef APP-PLUS -->
			<view style="height: 100rpx;"></view>
			<!-- #endif -->
			<view class="my-box1-two" v-if="token">
				<view class="my-box1-two1-left">
					<image :src="userInfo.avatar || '@/static/my/my2.png'" @click="openChangeModify" class="" style="border-radius: 50%;"></image>
					<view class="box1-two-center" style="padding-left: 20rpx;">
						<view class="name" style="margin-top: 20rpx;">{{ userInfo.phone }}</view>
						<view class="id" style="margin-top: 20rpx;font-size: 30rpx">ID:{{ userInfo.randnum }}</view>
					</view>
				</view>
				<view class="my-box1-two1-right" @click="openSignIn">
					<image src="@/static/my/my-new/my.png"></image>
					签到
				</view>
			</view>
			<view class="my-box1-two" v-else @click="openLogin">
				<view class="my-box1-two1-left">
					<image src="@/static/my/my2.png" class="my-box1-two1"></image>
					<view class="box1-two-center" style="line-height: 154rpx;padding-left: 50rpx;">
						去登录
					</view>
				</view>
			</view>
		</view>
		<view class="my-box2">
			<view class="my-box2-1">
				<view class="left">
					<image src="@/static/my/my-new/my1.png" class="my-box1-two1" mode="widthFix"></image>
					成为作者可获得收益
				</view>
				<view class="right" @click="openApply" v-if="userInfo.is_jiangshi  == 0">
					立即申请
					<image src="@/static/my/my-new/my2.png" class="my-box1-two1" mode="widthFix"></image>
				</view>
				<view class="right" @click="openUrl('/pages/my/income/income')" v-if="userInfo.is_jiangshi  == 1">
					查看收益
					<image src="@/static/my/my-new/my2.png" class="my-box1-two1" mode="widthFix"></image>
				</view>
			</view>
			<view class="my-box2-2">
				<view class="box2-2-one" @click="openUrl('/pages/my/sign-in/sign-in?type=2')">
					<view class="num">{{ userInfo.jifen || '0' }}</view>
					<view class="text">我的积分</view>
				</view>
				<view class="box2-2-one" @click="openHistory">
					<view class="num">{{ userNum || '0'  }}</view>
					<view class="text">观看记录</view>
				</view>
				<view class="box2-2-one" @click="openInvite">
					<view class="num">{{ userInfo.laxin_num || '0'  }}</view>
					<view class="text">我的邀请</view>
				</view>
				<view class="box2-2-one" @click="openIncome">
					<view class="num">{{ userInfo.money || '0'  }}</view>
					<view class="text">讲师收益</view>
				</view>
			</view>
		</view>
		<view class="my-box3 flex-row justify-between my-box6">
			<view class="flex-row">
				<image src="../../../static/my/my12.png">
				</image>
				<view class="text1 flex-row" @click="openSpecies">我的金币
					<view class="num">{{ userInfo.jinbi || '0' }}</view>
				</view>
			</view>
			<view class="box2" @click="openRecharge">充值</view>
		</view>
		<view class="my-box3">
			<view class="title">常用功能</view>
			<view class="my-box3-one">
				<view class="my-box3-one-box" @click="openArticleUrl('/pages/my/article/article')">
					<image src="@/static/my/my-new/my8.png" mode="widthFix"></image>
					<view class="text">我的文章</view>
				</view>
				<view class="my-box3-one-box" @click="openCollect">
					<image src="@/static/my/my-new/my3.png" mode="widthFix"></image>
					<view class="text">我的收藏</view>
				</view>
				<view class="my-box3-one-box" @click="openCustomer">
					<image src="@/static/my/my-new/my4.png" mode="widthFix"></image>
					<view class="text">联系客服</view>
				</view>
				<!-- <view class="my-box3-one-box" @click="openChangeModify">
					<image src="@/static/my/my-new/my5.png" mode="widthFix"></image>
					<view class="text">修改资料</view>
				</view> -->
				<view class="my-box3-one-box" @click="openInvite">
					<image src="@/static/my/my-new/my6.png" mode="widthFix"></image>
					<view class="text">邀请有礼</view>
				</view>
			</view>
		</view>
		<view class="my-box4">
			<image src="@/static/my/my-new/my7.png" class="my-box4-one" mode="widthFix"></image>
			<view class="my-box4-two">
				1、本平台推荐均来源于网络。<br>
				2、所有推荐资料仅供参考，理性投资，严禁赌博”。<br>
				3、杜绝一切黑彩，如需购彩，请到线下实体店购买。<br>
				最终解释权归南方双彩
			</view>
		</view>
		<view class="my-box5" v-if="token" @click="loginOut">
			退出登录
		</view>

		<u-modal :show="logoutShow" :title="title" :content="content" @confirm="confirm" :showCancelButton="true"
			@cancel="cancel"></u-modal>
		<u-popup :show="incomeShow" @close="incomeShow=false" mode="center" bgColor="transparent"
			class="joker-update-popup">
			<view class="joker-update-popup-box index-detail-popup-one">
				<image src="../../../static/index/detail-3.png" mode="widthFix" class="img"></image>
				<view class="title">
					只有讲师才可以查看收益，您是否想申请讲师?
				</view>
				<view class="btn-box">
					<u-button text="取消" class="btn1" @click="incomeShow=false"></u-button>
					<u-button text="确定" class="btn2" @click="openApply"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import jokerDecrypt from '@/common/joker.js'
	export default {
		data() {
			return {
				userInfo: '',
				logoutShow: false,
				title: '温馨提示',
				content: '是否确定要退出登录?',
				userNum: 1,
				userTel: '',
				token: '',
				incomeShow: false
			}
		},
		onLoad() {
			this.getKeFu()
			this.token = uni.getStorageSync('nftoken')
		},
		onShow() {
			if (this.token) {
				this.getSeeNum()
				this.getUserInfo()
			}
		},
		onPullDownRefresh() {
			// uni.stopPullDownRefresh();
			this.getSeeNum()
			this.getUserInfo('refresh')
		},
		methods: {
			openLogin() {
				this.$common.isLogin()
			},
			async getUserInfo(type) {
				const res = await this.$api.myInfo();
				if (res.code != 200) return uni.showToast({
					title: res.msg,
					icon: 'none',
					mask: true
				})
				const row = jokerDecrypt(res.data.data, res.data.key)
				const resData = JSON.parse(row).info
				console.log(resData)
				this.userInfo = resData
				if (type == 'refresh') {
					uni.stopPullDownRefresh();
				}
			},
			async getKeFu() {
				const res = await this.$api.myLianxiKefu();
				if (res.code != 200) return uni.showToast({
					title: res.msg,
					icon: 'none',
					mask: true
				})
				const row = jokerDecrypt(res.data.data, res.data.key)
				const resData = JSON.parse(row).info
				this.userTel = resData
			},
			async getSeeNum(type) {
				const res = await this.$api.mySeeNum();
				if (res.code != 200) return uni.showToast({
					title: res.msg,
					icon: 'none',
					mask: true
				})
				const row = jokerDecrypt(res.data.data, res.data.key)
				const resData = JSON.parse(row).info
				this.userNum = resData
			},
			openCollect() {
				uni.navigateTo({
					url: '/pages/my/collect/collect'
				})
			},
			openRecharge() {
				uni.navigateTo({
					url: '/pages/my/recharge/recharge' + "?t=" + Date.now()
				})
			},
			openCustomer() {
				uni.navigateTo({
					url: '/pages/my/customer/customer'
				})
			},
			openChangePwd() {
				if (!this.token) {
					this.$common.isLogin()
				} else {
					uni.navigateTo({
						url: '/pages/my/change-pwd/change-pwd'
					})
				}
			},
			openHistory() {
				uni.navigateTo({
					url: '/pages/my/history/history'
				})
			},
			openInvite() {
				uni.navigateTo({
					url: '/pages/my/invite/invite'
				})
			},
			openSignIn() {
				uni.navigateTo({
					url: '/pages/my/sign-in/sign-in'
				})
			},
			openApply() {
				const that = this
				if (!this.token) {
					this.$common.isLogin()
				} else {
					this.$api.getTeacherInfo().then(res => {
						if (res.code == 200) {
							const row = jokerDecrypt(res.data.data, res.data.key)
							const resData = JSON.parse(row).info
							console.log(row)
							if (!row.info) {
								that.incomeShow = false
								uni.navigateTo({
									url: '/pages/my/apply/apply?userInfo=' + JSON.stringify(this.userInfo)
								})
							}
						}
					})
				}
			},
			openArticleUrl(url) {
				if (!this.token) {
					this.$common.isLogin()
				} else {
					if (this.userInfo.is_jiangshi == 1) {
						uni.navigateTo({
							url
						})
					} else if (this.userInfo.is_jiangshi == 2) {
						uni.showToast({
							title: '讲师申请已拒绝',
							icon: 'none',
							mask: true
						})
					} else if (this.userInfo.is_jiangshi == 4) {
						uni.showToast({
							title: '讲师申请正在审核中，请勿重复提交',
							icon: 'none',
							mask: true
						})
					} else {
						this.incomeShow = true
					}
				}
			},
			// 我的金币
			openSpecies() {
				uni.navigateTo({
					url: '/pages/my/species/species'
				})
			},
			openIncome() {
				if (this.userInfo.is_jiangshi == 1) {
					uni.navigateTo({
						url: '/pages/my/income/income'
					})
				} else if (this.userInfo.is_jiangshi == 2) {
					uni.showToast({
						title: '讲师申请已拒绝',
						icon: 'none',
						mask: true
					})
				} else if (this.userInfo.is_jiangshi == 4) {
					uni.showToast({
						title: '讲师申请正在审核中，请勿重复提交',
						icon: 'none',
						mask: true
					})
				} else {
					this.incomeShow = true
				}
			},
			openChangeModify() {
				uni.navigateTo({
					url: '/pages/my/modify/modify?userInfo=' + JSON.stringify(this.userInfo)
				})
			},
			openUrl(url) {
				uni.navigateTo({
					url
				})
			},
			loginOut() {
				this.logoutShow = true
			},
			confirm() {
				this.$store.commit('TOKEN', '')
				this.$store.commit('USERINFO', '')
				uni.clearStorage();
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			cancel() {
				this.logoutShow = false
			},
			openTel() {
				const tels = this.userTel.toString()
				uni.makePhoneCall({
					phoneNumber: tels,
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					},
				});
			},
		}
	}
</script>
<style>
	page {
		background: #F5F4F7;
	}
</style>
<style lang="scss" scoped>
	.my-box4 {
		background-image: url('@/static/my/my-new/my7-1.png');
		background-size: 100% 100%;
	}
</style>